<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>葫芦娃</title>
	</head>
	<body>
		<div class="box">
			<img src="img/cloud.png" alt="云" class="cloud">
			<div class="hulu">
				<img src="img/七个葫芦.png" alt="藤蔓上的葫芦" class="all1">
				<img src="img/葫芦娃.png" alt="葫芦娃合照" class="all">
			</div>
			<div class="yaojing">
				<img src="img/蜈蚣精.png" alt="蜈蚣精" class="wugong">
				<img src="img/蛇精.png" alt="蛇精" class="shejing">
			</div>
			<div class="huluwabox">
				<img src="img/1.png" alt="葫芦娃1" class="huluwa h1">
				<img src="img/2.png" alt="葫芦娃2" class="huluwa h2">
				<img src="img/3.png" alt="葫芦娃3" class="huluwa h3">
				<img src="img/4.png" alt="葫芦娃4" class="huluwa h4">
				<img src="img/5.png" alt="葫芦娃5" class="huluwa h5">
				<img src="img/6.png" alt="葫芦娃6" class="huluwa h6">
				<img src="img/7.png" alt="葫芦娃7" class="huluwa h7">
			</div>
		</div>
		<audio src="img/群星 - 葫芦娃.mp3" autoplay loop></audio>
	</body>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			width: 1920px;
			height: 1152px;
			margin: 0 auto;
			position: relative;
		}

		.box {
			width: 1920px;
			height: 1152px;
			margin: 0 auto;
			overflow: hidden;
			position: relative;
			background: url(img/背景.jpg) center no-repeat;
			background-size: 1920px 1152px;
		}

		.all1 {
			top: 177px;
			left: 212px;
			width: 870px;
			display: block;
			position: absolute;
			animation: vineHide1 2s ease 2s forwards;
		}

		@keyframes vineHide1 {
			0% {
				opacity: 1;
				transform: translateY(0px);
			}

			99% {
				opacity: 1;
				transform: translateY(600px);
			}

			100% {
				opacity: 0;
			}
		}

		.all {
			opacity: 0;
			left: 212px;
			width: 870px;
			display: block;
			bottom: -138px;
			position: absolute;
			animation: vineHide2 2s ease 4s forwards;
		}

		@keyframes vineHide2 {
			0% {
				opacity: 0;
			}

			99% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		.cloud {
			top: 230px;
			width: 375px;
			display: block;
			position: absolute;
			animation: cloudMove 18s linear infinite;
		}

		@keyframes cloudMove {
			0% {
				transform: translateX(-10vw) translateY(0);
			}

			50% {
				transform: translateX(60vw) translateY(6vh);
			}

			100% {
				transform: translateX(120vw) translateY(0);
			}
		}

		.wugong {
			top: 0px;
			left: 0px;
			width: 400px;
			display: block;
			position: absolute;
			transform: scale(0);
			animation: goIn1 3s ease 0s forwards,
				move1 2s ease-in-out 3s infinite alternate;
		}

		@keyframes goIn1 {
			to {
				top: 800px;
				left: 980px;
				transform: scale(1);
			}
		}

		.shejing {
			top: 0px;
			left: 0px;
			width: 250px;
			display: block;
			position: absolute;
			transform: scale(0);
			animation: goIn2 3s ease 0s forwards,
				move1 2s ease-in-out 3s infinite alternate;
		}

		@keyframes goIn2 {
			to {
				top: 800px;
				left: 900px;
				transform: scale(1);
			}
		}

		.huluwabox {
			width: 100%;
			height: 100%;
			opacity: 0;
			position: absolute;
			animation: appear 1s ease 5s forwards;
		}

		@keyframes appear {
			to {
				opacity: 1;
			}
		}

		.huluwa {
			position: absolute;
		}

		@keyframes pop {
			0% {
				transform: scale(1) translateY(0);
			}

			55% {
				transform: scale(1.5) translateY(-14px);
			}

			100% {
				transform: scale(2) translateY(0);
			}
		}

		.h1 {
			left: 336px;
			width: 94px;
			bottom: 54px;
			animation:
				move1 3s ease-in-out 6s infinite alternate;
		}

		.h2 {
			left: 382px;
			width: 125px;
			bottom: 134px;
			animation:
				move2 3.5s ease-in-out 6s infinite alternate;
		}

		.h3 {
			width: 129px;
			left: 503px;
			bottom: 54px;
			animation:
				move3 2.8s ease-in-out 6s infinite alternate;
		}

		.h4 {
			width: 99px;
			left: 541px;
			bottom: 159px;
			animation:
				move4 3.2s ease-in-out 6s infinite alternate;
		}

		.h5 {
			width: 90px;
			left: 652px;
			bottom: 82px;
			animation:
				move5 3.4s ease-in-out 6s infinite alternate;
		}

		.h6 {
			width: 113px;
			left: 721px;
			bottom: 168px;
			animation:
				move6 3s ease-in-out 6s infinite alternate;
		}

		.h7 {
			width: 90px;
			left: 856px;
			bottom: 168px;
			animation:
				move7 3.6s ease-in-out 6s infinite alternate;
		}

		@keyframes move1 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-20px);
			}
		}

		@keyframes move2 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-25px);
			}
		}

		@keyframes move3 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-18px);
			}
		}

		@keyframes move4 {
			0% {
				transform: translateY(0);
			}
A
			100% {
				transform: translateY(-22px);
			}
		}

		@keyframes move5 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-15px);
			}
		}

		@keyframes move6 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-20px);
			}
		}

		@keyframes move7 {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(-25px);
			}
		}
	</style>
</html>